<template>
    <view class="head_nav" v-if="Data.tabList.length > 1">
        <view class="head_content" @click="checkIndex(item.code)" v-for="item in Data.tabList" :key="item.key">
            <view :class="navCode == item.code ? 'activite' : 'common'">{{ item.name }}</view>
            <view class="head_line" v-if="navCode == item.code"></view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue';
import request from '@/request';
const emit = defineEmits(['tabChange']);

const navCode = ref(0);

const allTabList = [
    { name: '快递发货', code: 0, key: 'pinkage' },
    { name: '同城配送', code: 2, ket: 'delivery' },
    { name: '上门自提', code: 1, key: 'switch' }
];
let Data = reactive({
    tabList: []
});
const checkIndex = index => {
    navCode.value = index;
    uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
    });
    tabValueChange(index);
};

const tabValueChange = val => {
    emit('tabChange', val);
};
onMounted(async () => {
    // here: 获取发货方式开关
    const { data } = await request('deliveryMethodsSwitchServ');
    // 1-启用 2-停用
    Data.tabList = allTabList.filter(x => Number(data[x.key]) === 1);
    navCode.value = Data.tabList[0]?.code;
    tabValueChange(navCode.value);
});
</script>
<style lang="scss" scoped>
.head_nav {
    border-top: #f5f5f5 2rpx solid;
    position: sticky;
    z-index: 9;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 11px 15px 0 15px;
    color: #cccccc;
    background-color: #fff;
    .activite {
        padding-bottom: 10px;
        color: #fe292b;
        font-family: PingFangSC-Medium, PingFang SC;
        font-size: 27rpx;
        font-weight: 500;
    }
    .common {
        padding-bottom: 10px;
        color: #999999;
        font-family: PingFangSC-Regular, PingFang SC;
        font-size: 27rpx;
        font-weight: 400;
    }

    .head_line {
        height: 2px;
        background-color: #fe292b;
    }
}
</style>
